• Align EpButton primary variant to Etherpad colibris (green background, white text)
• Reset button background to transparent to prevent browser default leak in dark themes
• Redesign EpChatMessage from bubbles to plain inline format matching Etherpad
• Update EpEditor to use proportional font and theme colors instead of monospace
• Standardize error/danger color across components to Etherpad's #d1242f
• Fix Playwright CI to use pinned version instead of latest

Fix primary button and reset UA background

• Reset button background to transparent to prevent browser ButtonFace leak in dark themes
• Invert primary variant: green background with white text (was dark bg with green text)
• Replace primary hover/active with brightness filter (0.94 and 0.88) instead of background changes
• Update transition to only animate filter and opacity

src/EpButton.ts

Redesign chat to plain inline format

• Remove bubble-style redesign; revert to plain inline message format matching Etherpad
• Simplify layout from flex header/body structure to inline bold author, muted time, and text
• Adjust padding from 6px to 4px 10px to match Etherpad colibris
• Remove border-radius and margin from own messages; keep background tint only

src/EpChatMessage.ts

Use theme colors and proportional font

• Change default font from monospace to theme's main-font-family (proportional)
• Update text color from hardcoded #333 to theme's text-color (#485365)
• Update background from hardcoded #fff to theme's bg-color
• Maintain fallback chain for customization via CSS variables

src/EpEditor.ts

Description

EpChatMessage.render() always inserts a <span class="time"> even when time is empty, and
.time has horizontal margins, so timestamp-less messages still get extra spacing between author
and body. This is a behavioral regression vs the previous conditional render and will make some chat
lines look misaligned.

Code

src/EpChatMessage.ts[50]

Evidence

The template explicitly renders an empty .time span when this.time is falsy, and the .time
rule applies margins regardless of content, so an empty span still consumes horizontal space.

src/EpChatMessage.ts[28-32]
src/EpChatMessage.ts[48-51]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`EpChatMessage` renders an empty `<span class="time"></span>` when `time` is falsy. Because the `.time` CSS rule adds horizontal margins, messages without a timestamp still get extra left/right spacing, producing an unintended visual gap.

### Issue Context
The previous implementation only rendered the time element when `time` was present. The new implementation keeps the element even when empty, which changes layout.

### Fix Focus Areas
- src/EpChatMessage.ts[48-51]
- src/EpChatMessage.ts[28-32]

### Suggested fix
Either:
1) Revert to conditional rendering (render nothing when `time` is empty), OR
2) Keep the empty span but add CSS such as `.time:empty { display: none; }` (or remove margins when empty) so it does not create spacing.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools